<script setup lang="ts">
// 热门搜索
import { useSearchStore } from "@/store/modules/search";
import { computed } from "vue-demi";
import type { PropType } from "vue";
import type { ListProp } from "../index.vue";

const emit = defineEmits(["search"]);

// 热门搜索
defineProps({
  list: {
    type: Array as PropType<ListProp[]>,
    default: () => [],
  },
});

const store = useSearchStore();

const hisList = computed(() => store.getSearchHistory);

const handleSeachItem = (item: ListProp) => {
  emit("search", item);
};

const handleClose = (first: number) => {
  const newList = hisList.value.filter((t) => t.first !== first);
  store.setSearchHistory(newList);
};
</script>

<template>
  <div>
    <section class="pt-4 px-2.5">
      <h3 class="text-sm text-slate-400">热门搜索</h3>
      <ul class="flex flex-wrap mt-2.5 mb-1.5">
        <li
          class="
            h-8
            leading-8
            mr-2
            mb-2
            px-3.5
            text-sm
            border-2 border-slate-200 border-rad
            rounded-5xl
          "
          v-for="(item, index) in list"
          :key="'hot' + index"
          @click="handleSeachItem(item)"
        >
          <a href="javascript:;">{{ item.first }}</a>
        </li>
      </ul>
    </section>
    <section>
      <ul class="">
        <li
          class="flex items-center h-11.5"
          v-for="(item, index) in hisList"
          :key="'history' + index"
          @click="handleSeachItem(item)"
        >
          <SvgIcon icon="history" className="mx-2.5"></SvgIcon>
          <div class="flex-1 flex items-center h-11.5 overflow-hidden">
            <span class="flex-1 line-clamp-1 mr-1">{{ item.first }}</span>
            <div
              class="w-8 h-8 leading-8"
              @click.stop="handleClose(item.first)"
            >
              <SvgIcon icon="close-outline"></SvgIcon>
            </div>
          </div>
        </li>
      </ul>
    </section>
  </div>
</template>

<style lang="scss" scoped></style>
